<template>
<!-- 顶部导航 -->
  <div class="identity">
    <van-nav-bar
      title="选择您的身份"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 中央选择身份按钮 -->
    <van-sidebar v-model="active" @change="onChange">
      <van-sidebar-item title="个体种植户" />
      <van-sidebar-item title="个体养殖户" />
      <van-sidebar-item title="企业种植户" />
      <van-sidebar-item title="企业养殖户" />
      <van-sidebar-item title="超市" />
      <van-sidebar-item title="餐饮店" />
      <van-sidebar-item title="酒店" />
      <van-sidebar-item title="中间商" />
      <van-sidebar-item title="家庭农场" />
      <van-sidebar-item title="批发商" />
      <van-sidebar-item title="电商" />
      <van-sidebar-item title="食堂" />
      <van-sidebar-item title="贸易公司" />
      <van-sidebar-item title="其他" />
    </van-sidebar>
    <!-- 发布信息按钮 -->
    <van-button round type="primary" @click="fn">发布新供应</van-button>
  </div>
</template>

<script>
import router from "../../router/index.js"
import { ref } from 'vue';
export default ({
  setup() {
    // 顶部最左侧返回上层按钮
    const onClickLeft = () =>{
      router.go(-1)
    }
    //按钮的索引值
    const active = ref(0);
    const onChange = (index) => {
      
    }
    //点击发布新供应的按钮提交的事件
    const fn=()=>{
      //身份所代表的索引
      let identitynum=active.value+1;
      if(identitynum===14){
        identitynum=0
      }
      //post请求需要传的数据
      let obj={};
      obj.token=window.localStorage.getItem("token");
      obj.user_identity=identitynum.toString();
      //发送post请求
      if(window.confirm('确定修改身份?')){
      fetch('http://www.pudge.wang:5000/api/users/update',{
        method:'POST',
        headers:{
      　　'Content-Type': 'application/json;charset=utf-8'
      　　},
       body:JSON.stringify(obj)
      }).then(response=>response.json()).then(res=>{
        alert(res.msg)
        //跳转回个人信息页
        router.push('/information')
    })
    }
        
    }
    return {
      onClickLeft,active,onChange,fn
    };
  },
})
</script>

<style>
.identity .van-sidebar{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.identity .van-sidebar-item{
  width: 40%;
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  background-color: #f6f6f6;
  border-radius: 40px;
}
.identity .van-sidebar-item--select{
  background-color: #4cc79b;
}
.identity .van-sidebar-item--select::before{
  display: none;
}
.identity .van-button{
  position: fixed;
  bottom: 20px;
  width: 80%;
  height: 50px;
  margin-left: 10%;
  background-color: #4cc79b;
}
</style>
